<template>
  <table>
    <tr>
      <td v-for="item in enha">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <el-select v-model="item.selectValue" @change="selectChanged(item)" clearable placeholder="Select">
                <el-option-group v-for="group in list" :key="group.groupValue" :label="group.groupName">
                  <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"/>
                </el-option-group>
              </el-select>
            </div>
          </template>
          <viewer :data="item.data"/>
        </el-card>
      </td>
      <td>
      </td>
    </tr>
  </table>
</template>
<script>
import {ElButton, ElTabPane, ElTabs, ElSelect, ElOption, ElOptionGroup, ElCard} from 'element-plus'
import {defineComponent} from "vue";
import viewer from './viewer.vue'
import data from '../data'

export default defineComponent({
  name: "Home",
  components: {
    ElButton, ElTabPane, ElTabs, ElSelect, ElOption, ElOptionGroup, ElCard, viewer
  },
  props: {
    list: Array
  },
  data() {
    return {
      enha: [
        {selectValue: '', data: {}},
        {selectValue: '', data: {}},
        {selectValue: '', data: {}},
        {selectValue: '', data: {}},
        {selectValue: '', data: {}},
        {selectValue: '', data: {}}
      ]
    };
  },
  methods: {
    selectChanged(item) {
      item.data = {};
      data.getDes(item.selectValue).then(obj => item.data = obj);
    }
  }
});
</script>
<style scoped lang="scss">
.el-card {
  --el-card-padding: 15px !important;
}

.box-card {
  width: 320px;
  height: 530px;

  .card-header {
    text-align: left;
    height: 40px;

    .el-select {
      width: 290px;
    }
  }
}
</style>
